<template>
  <div class="post">
    <div class="post-header">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="form" :rules="rules">
        <el-form-item label="" prop="comName">
          <el-input v-model="formInline.comName" placeholder="请输入发布小区"></el-input>
        </el-form-item>
        <el-form-item label="" prop="tit">
          <el-input v-model="formInline.tit" placeholder="请输入公告主题"></el-input>
        </el-form-item>
        <el-form-item label="" prop="con">
          <el-input v-model="formInline.con" placeholder="请发布内容"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="success" class="el-icon-plus" @click="onSubmit(1)">发布公告</el-button>
          <el-button type="primary" @click="onSubmit(2)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="post-main">
      <div class="main-title">
        <span>公告信息</span>
        <span></span>
      </div>
      <div class="main-con">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="index" label="序号" width="70px">
          </el-table-column>
          <el-table-column prop="title" label="公告主题" width="180">
          </el-table-column>
          <el-table-column prop="content" label="公告内容" width="400">
          </el-table-column>
          <el-table-column prop="createtime" label="创建时间">
            <!-- 插槽 -->
            <template slot-scope="scope">
              {{ scope.row.createtime.substring(0, 10) }} {{ Number(scope.row.createtime.substring(11, 13)) + 8 }}
              {{ scope.row.createtime.substring(13, 19) }}
            </template>
          </el-table-column>
          <el-table-column prop="communityname" label="小区名称">
          </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
              <!-- 
                  scope.row:当前行信息
                  scope.#index:当前点击的下标
            -->
              <el-button size="mini" type="danger" icon="el-icon-delete"
                @click="handleDel(scope.row, scope.$index)">归档</el-button>

              <el-button size="mini" type="success" icon="el-icon-view" @click="handleView(scope.row)">查看公告</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="iPagination.currentPage" :page-sizes="iPagination.pageSizes" :page-size="iPagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="iPagination.total">
        </el-pagination>
      </div>
    </div>
    <!-- 模态框 -->
    <div class="mtk">
      <el-dialog title="公告详情" :visible.sync="dialogFormVisible">
        <el-form :model="ruleForm">
          <el-form-item label="小区名称：">
            <el-input v-model="ruleForm.communityname" disabled></el-input>
          </el-form-item>
          <el-form-item label="发布时间：" >
            <el-input v-model="time" disabled>
              
            </el-input>
            
          </el-form-item>
          
          <el-form-item label="公告主题：">
            <el-input v-model="ruleForm.title" disabled></el-input>
          </el-form-item>
          <el-form-item label="公告内容：">
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="ruleForm.content" disabled>
            </el-input>
          </el-form-item>
          <el-form-item label="公告状态：" disabled>
            <el-input value="阅读量" disabled></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iPagination: {
        // 默认选中哪一页
        currentPage: 1,
        // 定义每列有多少条列表
        pageSizes: [5, 10, 20, 50, 100],
        // 默认定义每页多少条
        pageSize: 10,
        // 定义总条数
        total: null,
        // // 页码
        // page:1,
        // // 每页多少条
        // rows:10,
      },
      formInline: {
        comName: '',
        con: '',
        tit: '',
      },
      tableData: [],
      ruleForm: {
        communityname: "",
        content: "",
        title: "",
        createtime:""
      },
      rules: {
        comName: [
          // required 必填 message：消息提示 trigger：失去焦点的时候触发
          { required: true, message: '请输入发布小区', trigger: 'blur' },
        ],
        con: [
          { required: true, message: '请输入公告主题', trigger: 'blur' },
        ],
        tit: [
          { required: true, message: '请输入内容', trigger: 'blur' },
        ],

      },
      // m默认隐藏
      dialogFormVisible: false,
      time:""
    }
  },
  methods: {
    // 渲染数据
    handleServe() {
      this.$Axios({
        url: '/poster/getPosterData',
        method: 'get',
        data: {
          currPage: this.iPagination.currentPage - 1,
          pageNum: this.iPagination.pageSize,
        },
        success: (result) => {
          this.tableData = result.data
          this.iPagination.total = result.total;
        }
      })
    },
    // 开始发布
    onSubmit(val) {
      if (val == 1) {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            this.$message.error({
              message: "必填项不能为空",
              // duration: 2000
            });
          } else {
            this.$axiosToken({
              url: '/poster/addPoster',
              method: 'post',
              data: {
                communityname: this.formInline.comName,
                title: this.formInline.tit,
                content: this.formInline.con
              },
              success: (result) => {
                this.handleServe()
                this.$message({
                  showClose: true,
                  message: '用户添加成功',
                  type: 'success'
                })
                this.formInline = {}
              },

            })
          }
        })
      } else {
        this.formInline = {}
      }
    },
    // 删除
    handleDel(row, index) {
      // console.log(row);
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // const p_id = row.id;
        this.$axiosToken({
          url: '/poster/delPoster',
          method: 'get',
          data: { p_id: row.p_id },
          success: (result) => {
            this.handleServe()
            this.$message({
              showClose: true,
              message: '删除成功',
              type: 'warning'
            })
          }
        })
      })
    },
    // 查看公告
    handleView(row) {
      // 打开模态框
      this.dialogFormVisible = true
      console.log(row);
      this.ruleForm=Object.assign(row)
      this.time=this.ruleForm.createtime.substring(0,10)
    },
    // 分页器
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.iPagination.pageSize = val
      this.handleServe()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.iPagination.currentPage = val
      this.handleServe()
    }
  },
  mounted() {
    this.handleServe()
  }
}
</script>
<style lang="scss" scoped>
.post::v-deep {
  .el-form {
    .el-form-item {
      margin-bottom: 0;
      width: 21%;

      &:nth-child(3) {
        width: 30%;
      }

      .el-form-item__content {
        width: 100%;

        input {
          height: 36px;
          font-size: 14px;
        }

        button {
          width: 40%;
          font-size: 14px;
        }
      }
    }
  }

  .post-main {
    border: 1px solid #ccc;
    // padding: 10px;
    margin-top: 10px;

    .main-title {
      display: flex;
      justify-content: space-between;

      span:nth-child(1) {
        font-size: 14px;
        display: inline-block;
        color: #389af9;
        background: #fff;
        padding: 10px 20px;
        border-right: 1px solid #ccc;
        width: 8%;
        box-sizing: border-box;
      }

      span:last-child {
        width: 92%;
        background: #f5f7fa;
        border-bottom: 1px solid #ccc;
      }
    }

    .main-con {
      padding: 10px;

      .el-table {

        th,
        td {
          font-size: 14px;
          text-align: center;
        }


        .has-gutter {
          tr {
            background: #eef1f6;
          }

          .el-table__cell {
            background: #eef1f6;
            border-right: 1px solid #c2c2c28a;
            font-size: 14px;
            font-weight: 600;
            color: #000000c0;
          }
        }
      }
    }

    .el-pagination {
      text-align: right;
    }
  }

  .mtk {
    .el-form {
      .el-form-item {
        display: inline-block;
        margin-bottom: 0;
        // width: 46%;

        .el-input {
          width: unset;
        }

        &:first-child {
          width: 46%;
          margin-right: 20px;
          .el-input {
            width: 78%;
          }
        }

        &:nth-child(2) {
          width: 46%;
          .el-input {
            width: 78%;
          }
        }

        &:nth-child(3) {
          // width: 30%;
          display: block;
          .el-input {
            width: 100%;
          }
        }
        &:nth-child(4) {
          // width: 30%;
          display: block;
          .el-input {
            width: 100%;
          }
        }


        .el-form-item__label {
          padding: unset;
        }

        .el-form-item__content {
          width: 100%;
          // display: inline-block;
          input {
            height: 36px;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>